/** Color codes **/
@black: #000;
@dark-blue: #24333B;

/** Base directory of images **/
@base-dir: "../images";

/** Bullets for icon description **/
@bullets: "bullet.png";

/** Home Icon File Names **/
@energy: "icon-go-low-lg.png";
@activities: "icon-scoreboard-lg.png";
@news: "icon-news-lg.png";
@prizes: "icon-prizes-lg.png";
@help: "icon-help-lg.png";
@profile: "icon-profile-lg.png";

/** On Mouse-over Icon File Names **/
@energy_over: "icon-go-low-lg-over.png";
@activities_over: "icon-scoreboard-lg-over.png";
@news_over: "icon-news-lg-over.png";
@prizes_over: "icon-prizes-lg-over.png";
@help_over: "icon-help-lg-over.png";
@profile_over: "icon-profile-lg-over.png";

/** Dimensions of home icons **/
.icon-size (@width: 120px, @height: 124px) {
  width: @width;
  height: @height;
}
  
/** Icon location/background/size **/
.icon(@locale: none) {
  background: transparent url("@{base-dir}/@{locale}") top left no-repeat;
  .icon-size;
}
  
/** Border radius settings**/
.border-radius (@size: 8px) {
  border-radius: @size;
}
  
/** Shadow settings **/
.shadow (@x: 3, @y: 3, @z: 5, @color: @black) {
  box-shadow: @arguments;
   -moz-box-shadow: @arguments;
   -webkit-box-shadow: @arguments;
}

.content p {
    background: transparent url("@{base-dir}/@{bullets}") top left repeat-y;
    font-size: 8pt;
    line-height: 14px;
    text-align: left;
    white-space: nowrap;
    padding-left: 13px;
    margin: 0 2px 5px 2px
}

.content .tile { 
    background-color: rgba(46, 139, 87, 0.2);
    padding: 1px;
    border: 3px outset #DDD;
    margin-top: -.7em;
    /*  background-image: -moz-linear-gradient(100% 50% 90deg, #E3E3E3, #A1A1A1); */
    /*  background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(#E3E3E3), */
    /*      to(#BBB) ); */
    .border-radius;
    .shadow;
    /* Force tiles on top of icons.*/
    position: relative;
    z-index: 100;
}

.tile h6 {
    color: @dark-blue;
}

#home-energy-icon {
    .icon("@{energy}");
        &:hover {.icon("@{energy_over}");}
}

#home-activities-icon {
    .icon("@{activities}");
        &:hover {.icon("@{activities_over}");}
}

#home-news-icon {
    .icon("@{news}");
        &:hover {.icon("@{news_over}");}
}

#home-prizes-icon {
    .icon("@{prizes}");
        &:hover {.icon("@{prizes_over}");}
}

#home-help-icon {
    .icon("@{help}");
        &:hover {.icon("@{help_over}");}
}

#home-profile-icon {
    .icon("@{profile}");
        &:hover {.icon("@{profile_over}");}
}